﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>网友宁宁分享带提示层的中国地图jquery插件</title>
    <link href="js/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="js/jquery.vector-map.js" type="text/javascript"></script>
    <script src="js/china-zh.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //数据可以动态生成，格式自己定义，cha对应china-zh.js中省份的简称
            var dataStatus = [{ cha: 'HKG', name: '香港', des: '<br/>Jquery学堂在香港九龙地区讲课，大家来报名哇' },
                             { cha: 'HAI', name: '海南', des: '<br/>无活动点' },
                             { cha: 'YUN', name: '云南', des: '<br/>无活动点' },
                             { cha: 'BEJ', name: '北京', des: '<br/>2个活动点' },
                             { cha: 'TAJ', name: '天津', des: '<br/>无活动点' },
                             { cha: 'XIN', name: '新疆', des: '<br/>无活动点' },
                             { cha: 'TIB', name: '西藏', des: '<br/>无活动点' },
                             { cha: 'QIH', name: '青海', des: '<br/>无活动点' },
                             { cha: 'GAN', name: '甘肃', des: '<br/>无活动点' },
                             { cha: 'NMG', name: '内蒙古', des: '<br/>无活动点' },
                             { cha: 'NXA', name: '宁夏', des: '<br/>无活动点' },
                             { cha: 'SHX', name: '山西', des: '<br/>无活动点' },
                             { cha: 'LIA', name: '辽宁', des: '<br/>无活动点' },
                             { cha: 'JIL', name: '吉林', des: '<br/>无活动点' },
                             { cha: 'HLJ', name: '黑龙江', des: '<br/>无活动点' },
                             { cha: 'HEB', name: '河北', des: '<br/>无活动点' },
                             { cha: 'SHD', name: '山东', des: '<br/>无活动点' },
                             { cha: 'HEN', name: '河南', des: '<br/>无活动点' },
                             { cha: 'SHA', name: '陕西', des: '<br/>无活动点' },
                             { cha: 'SCH', name: '四川', des: '<br/>无活动点' },
                             { cha: 'CHQ', name: '重庆', des: '<br/>无活动点' },
                             { cha: 'HUB', name: '湖北', des: '<br/>1个活动点' },
                             { cha: 'ANH', name: '安徽', des: '<br/>无活动点' },
                             { cha: 'JSU', name: '江苏', des: '<br/>无活动点' },
                             { cha: 'SHH', name: '上海', des: '<br/>1个活动点' },
                             { cha: 'ZHJ', name: '浙江', des: '<br/>无活动点' },
                             { cha: 'FUJ', name: '福建', des: '<br/>无活动点' },
                             { cha: 'TAI', name: '台湾', des: '<br/>无活动点' },
                             { cha: 'JXI', name: '江西', des: '<br/>无活动点' },
                             { cha: 'HUN', name: '湖南', des: '<br/>无活动点' },
                             { cha: 'GUI', name: '贵州', des: '<br/>无活动点' },
                             { cha: 'GXI', name: '广西', des: '<br/>无活动点' }, 
                             { cha: 'GUD', name: '广东', des: '<br/>Jquery学堂在广州天河区讲课<br />名额有限，先到先得哇<br />大家来报名哇'}];
            $('#container').vectorMap({ map: 'china_zh',
                color: "#ffccaa", //地图颜色
                onLabelShow: function (event, label, code) {//动态显示内容
                    $.each(dataStatus, function (i, items) {
                        if (code == items.cha) {
                            label.html(items.name + items.des);
                        }
                    });
                }
            })
            $.each(dataStatus, function (i, items) {
                if (items.des.indexOf('个') != -1) {//动态设定颜色，此处用了自定义简单的判断
                    var josnStr = "{" + items.cha + ":'#00FF00'}";
                    $('#container').vectorMap('set', 'colors', eval('(' + josnStr + ')'));
                }
            });
            $('.jvectormap-zoomin').click(); //放大
        });
      
    </script>
</head>
<body>
<center>
  <div style="font-size:15px; font-weight:bold; text-align:center; line-height:25px;">网友宁宁分享带提示层的中国地图jquery插件<br />
     <a href="http://www.jq-school.com" target="_blank" style="color:#000">JquerySchool</a>网站出品（<a href="http://www.jq-school.com" target="_blank">http://www.jq-school.com</a>）<br />
	   （<a href="http://bbs.jq-school.com" target="_blank" style="color:#000">Jquery学堂交流社区</a>）	
	  <br />
      官方网站学习交流QQ群<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=f221dd676cd5f7f51f6b580ff8fe1bdd2fefe911ae0e1137a6f79c58d6e11ebf"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="Jquery学堂QQ⑧群" title="Jquery学堂QQ⑧群"></a></div>
</center>
    <div id="container" style="margin-left: 45px; padding-top: 10px; padding-left: 10px;
        background: white; width: 650px; height: 530px;">
    </div>
</body>
</html>
